<script setup lang="ts">
import {ref} from "vue";
const show = ref(false);
const showPopup = () => {
    // console.log(123)
    show.value = true;
};
</script>

<template>
<div>
   <div >
       <van-cell title=""  @click="showPopup" style="height: 38px"  class="bgImg">
           <!--        <img src="@/assets/images/Right Icon img2.png" alt="" style="width: 20px;height: 20px">-->
       </van-cell>
   </div>
    <van-popup

        v-model:show="show"
        position="left"
        :style="{ width: '30%', height: '100%' }"
    >
        <div class="skip">
            <!--冀商发布-->
            <router-link to="/JishangPublishing">
                <div class="first">
                    <img src="@/assets/images/冀商发布.png" alt="">
                    <p>冀商发布</p>
                </div>
            </router-link>
            <!--冀商传奇-->
            <router-link to="/JishangLegend">
                <div class="first">
                    <img src="@/assets/images/冀商传奇.png" alt="">
                    <p>冀商传奇</p>
                </div>
            </router-link>
            <!--冀商史话-->
            <router-link to="/JishangHistoricalNotes">
                <div class="first">
                    <img src="@/assets/images/冀商史话.png" alt="">
                    <p>冀商史话</p>
                </div>
            </router-link>
            <!--冀商动态-->
            <router-link to="/JishangDynamicState">
                <div class="first">
                    <img src="@/assets/images/冀商动态.png" alt="">
                    <p>冀商动态</p>
                </div>
            </router-link>
            <!--友商商会-->
            <router-link to="/FriendsWill">
                <div class="first">
                    <img src="@/assets/images/友商商会.png" alt="">
                    <p>友商商会</p>
                </div>
            </router-link>
            <!--冀商福利-->
            <router-link to="/JishangBonus">
                <div class="first">
                    <img src="@/assets/images/冀商福利.png" alt="">
                    <p>冀商福利</p>
                </div>
            </router-link>
        </div>
    </van-popup>

</div>
</template>
<style lang="less">
.bgImg{
    width: 20px;
    height: 20px;
    background-image: url("@/assets/images/Right Icon 2.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: 20px 20px;
    //opacity: 0;
}
.skip{
    width: 113px;
    height: 400px;
    margin: 10px auto;

    .first{
        width: 100%;
        height: 40px;
        font-size: 14px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        border-bottom: 1px solid ghostwhite;

        img{
            width: 16px;
            height: 16px;
        }

        p{
            color: black;
        }
    }
}
</style>